<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  </title>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js">
    </script>


</head>
<body>

  <div id="main" style="width: 1200px;height:700px;"></div>
</body>
<script type = text/javascript>


    var myChart = echarts.init(document.getElementById('main'));
    option = {
    title: {
        text: '某APP用户情况统计',
        subtext: '2021年1月',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
     legend: {
        top: 'bottom',
        left: 'center'
    },
    series: [

        {
            name: '用户数量',
            type: 'pie',
            radius: ['45%', '60%'],
            labelLine: {
                length: 30,
            },
            label: {
                formatter: ['{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  '].join('\n'),
                backgroundColor: '#F6F8FC',
                borderColor: '#8C8D8E',
                borderWidth: 1,
                borderRadius: 4,

                rich: {
                    a: {
                        color: '#6E7079',
                        lineHeight: 22,
                        align: 'center'
                    },
                    hr: {
                        borderColor: '#8C8D8E',
                        width: '100%',
                        borderWidth: 1,
                        height: 0
                    },
                    b: {
                        color: '#4C5058',
                        fontSize: 14,
                        fontWeight: 'bold',
                        lineHeight: 33
                    },
                    per: {
                        color: '#fff',
                        backgroundColor: '#4C5058',
                        padding: [3, 4],
                        borderRadius: 4
                    }
                }
            },
            data: [
               {value: 183472, name: '流失用户'},
                {value: 6546, name: '回流用户'},
                {value: 524, name: '连续活跃用户'},
                {value: 91, name: '新用户'},
                {value: 0, name: '活跃用户'}

            ]
        }
    ]
};
   myChart.setOption(option);

</script>
</html>